<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>文件详情</title>
    <link rel="icon" type="image/x-icon" href="/images/logoRed.ico">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/formSelects-v4.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/common.css}">
    <!--标签插件-->
    <link href="/static/css/materialdesignicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/js/jquery-tags-input/jquery.tagsinput.min.css">
    <!-- end 标签插件   -->
</head>
<body>
<div th:replace="include/pagination::header"></div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>文件详情页</legend>
            </fieldset>
        </div>
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">

                <label class="layui-form-label">存放地址</label>
                <div class="layui-input-block" style="width: 70%;">
                    <input type="text" name="title" lay-verify="title" id="filePath" autocomplete="off" placeholder="存放地址" class="layui-input" th:value="${fileDetail!=null ? (fileDetail.filePath !=null ? fileDetail.filePath:''):''}" disabled="disabled">
                </div>
            </div >
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">文件名</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="文件名" class="layui-input" th:value="${fileDetail!=null ? (fileDetail.fileName !=null ? fileDetail.fileName:''):''}" disabled="disabled">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">时长</label>
                    <div class="layui-input-inline">
                        <input type="text" id="modifyDateBegin"  lay-verify="title" placeholder="时长" autocomplete="off" class="layui-input" th:value="${fileDetail!=null ? (fileDetail.fileDuration !=null ? fileDetail.fileDuration+'分钟':''):''}" disabled="disabled">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">大小</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="文件大小" class="layui-input"  th:value="${fileDetail!=null ? (fileDetail.fileSizeByte !=null ? fileDetail.fileSizeByte+'KB':''):''}" disabled="disabled">
                    </div>
                </div>
                <button  id="fileView" class="layui-btn layui-btn-sm layui-btn-normal icon-btn"><i class="layui-icon">&#xe615;</i>预览
                </button>
            </div>
        </div>
        <div class="layui-card-body" style="background-color: #fff;">
<!--            <div th:replace="include/pagination::myVideo"></div>-->
<!--            <div class="layui-card" style=" height: 50%;width:75%;">-->
<!--                <video controls="" autoplay="" style="height: 100%;width:100%;" id="vid" name="media">-->
<!--                    <source src="" type="video/webm" id="videoSource">-->
<!--                </video>-->
<!--            </div>-->
            <div class="layui-row layui-col-space20">
                <div class="layui-col-md6">
                    <div class="layui-row grid-demo">
                        <div class="layui-form-item">
                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                                <legend>本文件夹下其他文件(文件夹)</legend>
                            </fieldset>
                            <div class="layui-card-header">当前位置：<span id="tvFP">[[${fileDirs!=null ? fileDirs:'/'}]]</span><span id="tvFPId" hidden>[[${fileDirIds!=null ? fileDirIds:'/'}]]</span></div>
                            <div class="layui-card-body">
                                <div class="btnDiv">
                                    <button id="btnBack" class="layui-btn layui-btn-sm layui-btn-primary icon-btn"><i class="layui-icon">&#xe65c;</i>返回上级
                                    </button>
                                </div>
                                <hr>
                                <div class="file-list">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md5">
                    <div class="layui-row grid-demo grid-demo-bg1">
                        <div class="layui-form-item">
                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                                <legend>相关文件夹</legend>
                            </fieldset>
                            <div  class="sfile-list">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
    </div>
</div>
<!-- 下拉菜单 -->
<div class="dropdown-menu dropdown-anchor-top-left" id="dropdownFile">
    <div class="dropdown-anchor"></div>
    <ul>
        <li><a id="open"><i class="layui-icon layui-icon-file"></i>&emsp;查看&emsp;</a></li>
    </ul>
</div>
<!-- 渲染模板 -->
<script id="fileTpl" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
    <div class="file-list-item" data-id="{{item.fileId}}" data-dir="{{item.isDir}}" data-url="{{item.filePath}}" data-name="{{item.fileName}}">
        <div class="file-list-img">
            {{# if(item.isImg==0){ }}
            <img src="{{item.filePath}}"/>
            {{# }else{ }}
            <img src="/static/images/fti/{{item.fileExtension}}.png"/>
            {{# } }}
        </div>
        <div class="file-list-name">
            {{# if(item.isDir==1){ }}
            {{item.fileName}}
            {{# }else{ }}
            {{item.fileName}}
            {{# } }}
        </div>
    </div>
    {{#  }); }}
    {{# if(d.length<=0){ }}
    <div class="list-empty">
        <i class="layui-icon layui-icon-face-surprised"></i>
        <div>没有文件</div>
    </div>
    {{# } }}
</script>
<script th:src="@{/static/layuiadmin/layui/layui.all.js}"></script>
<script th:src="@{/static/js/jquery.js}"></script>
<!--文件转码-->
<script type="text/javascript" th:src="@{/static/js/base64.js}"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模
    }).use(['layer', 'table', 'element','form','util','upload','laydate','tree','laytpl'], function(){
        var  layer = layui.layer //弹层
            ,table = layui.table //表格
            ,element = layui.element //元素操作
            ,form = layui.form
            ,laydate = layui.laydate
            ,util=layui.util
            ,tree=layui.tree
            ,upload=layui.upload
            ,laytpl = layui.laytpl;
        var xhrOnProgress = function (fun) {
            xhrOnProgress.onprogress = fun; //绑定监听
            //使用闭包实现监听绑
            return function () {
                //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
                var xhr = $.ajaxSettings.xhr();
                //判断监听函数是否为函数
                if (typeof xhrOnProgress.onprogress !== 'function')
                    return xhr;
                //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
                if (xhrOnProgress.onprogress && xhr.upload) {
                    xhr.upload.onprogress = xhrOnProgress.onprogress;
                }
                return xhr;
            }
        };
        // 渲染文件列表
        function renderList(dirIds) {
            if (!dirIds) {
                dirIds = $('#tvFPId').text();
            }
            layer.load(2);
            $.get('/file', {
                dirIds: dirIds
            }, function (res) {
                layer.closeAll('loading');
                if (res.code === 200) {
                    laytpl(fileTpl.innerHTML).render(res.data, function (html) {
                        $('.file-list').html(html);
                    });
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            });
        }
        renderList();
        var mUrl;
        var name;
        var id;
        // 列表点击事件
        $('body').on('click', '.file-list-item', function (e) {
            var isDir = $(this).data('dir');
            name = $(this).data('name');
            id = $(this).data('id');
            mUrl = $(this).data('url');
            $('#copy').attr('data-clipboard-text', mUrl);
            if (isDir) {
                getDirs(id);
            } else {
                var $target = $(this).find('.file-list-img');
                $('#dropdownFile').css({
                    'top': $target.offset().top + 90,
                    'left': $target.offset().left + 25
                });
                $('#dropdownFile').addClass('dropdown-opened');
                if (e !== void 0) {
                    e.preventDefault();
                    e.stopPropagation();
                }
            }
        });

        //获取目录
        function getDirs(id){
            //dirIds1='/'+id;
            //renderList(dirIds1);
            $.get('/getDirs', {id: id}, function (res) {
                $('#tvFP').text(res.data.dirs === '' ? '/' : res.data.dirs);
                $('#tvFPId').text(res.data.dirIds === '' ? '/' : res.data.dirIds);
                renderList(res.data.dirIds);
            });
        }
        // 返回上级
        $('#btnBack').click(function () {
            var cDir = $('#tvFP').text();
            var cDirId = $('#tvFPId').text();
            if (cDir === '/') {
                layer.msg('已经是根目录', {icon: 2})
            } else {
                cDir = cDir.substring(0, cDir.lastIndexOf('/'));
                cDirId = cDirId.substring(0, cDirId.lastIndexOf('/'));
                if (!cDir) {
                    cDir = '/';
                    cDirId = '/';
                }
                $('#tvFP').text(cDir);
                $('#tvFPId').text(cDirId);
                renderList(cDirId);
            }
        });
        // 点击空白隐藏下拉框
        $('html').off('click.dropdown').on('click.dropdown', function () {
            $('#copy').attr('data-clipboard-text', '');
            $('#dropdownFile').removeClass('dropdown-opened');
        });
        // 打开
        $('#open').click(function () {
            window.open("/details.htm/"+id);
            //window.location.href = "/details.htm/" + id;
        });
        // 文件预览
        $('#fileView').click(function () {
            var filePath=$("#filePath").val();
            //var url = 'http://localhost:8080/resource-webapp/'+filePath.substring(filePath.indexOf("/"),filePath.length); //要预览文件的访问地址
            var url = 'http://localhost:8080/resource-webapp/'+filePath;
            layer.open({
                type: 2,
                title: '文件预览',
                content: 'http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)),
                area: ['1080px', '650px'],
                offset: '50px',
                fixed: true,
                resize: true,
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
            });
            //window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));
        });
    });
    //$("#vid source").attr('src',"file://172.29.143.244/%E5%AD%A6%E7%94%9F%E8%B5%84%E6%96%99/%E3%80%90%E9%80%89%E4%BF%AE%E8%AF%BE%E3%80%91/%E8%8B%B1%E8%AF%AD%E5%89%A7%E9%80%89%E4%BF%AE%E8%AF%BE/%E4%B8%83%E4%B8%8B/%E5%BD%93%E6%80%AA%E7%89%A9%E6%9D%A5%E6%95%B2%E9%97%A8.mkv");
</script>
</body>
</html>
